<template>
  <div id="vxePulldownSelection">
    <vxe-pulldown :ref="'xDown4' + childIndex" transfer span="24" style="width: 100%">
      <template #default>
        <vxe-button type="text" content="点击查看详情" @click="clickEvent3"></vxe-button>
      </template>
      <template #dropdown>
        <div class="my-dropdown4">
          <vxe-toolbar class-name="bg-gray">
            <template #buttons>
              <vxe-input
                v-model.trim="stringKey"
                :type="inputtype"
                placeholder="请输入内容"
                style="width: 100%"
                clearable
                @keyup="keyupEnter"
              ></vxe-input>
            </template>
            <template #tools>
              <vxe-button type="primary" @click="stringListConfirm">确定</vxe-button>
            </template>
          </vxe-toolbar>
          <div class="inputaction" style="width: 25vw">
            <div
              class="valueBox"
              style="max-height: 25vh; height: 25vh; overflow-y: auto; margin-top: 0.25em"
            >
              <div class="flex justify-start valueItem" v-for="(itm, idx) in tableList" :key="itm">
                <div>
                  <span>
                    <vxe-button
                      type="text"
                      class-name="text-red"
                      icon="vxe-icon-delete"
                      @click="deleteSelectedItem(idx)"
                    ></vxe-button>
                  </span>
                  <span class="margin-left-xs">
                    {{ idx + 1 + '、' + itm }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>
<script lang="ts" setup>
// import { Component, Prop, Emit, Vue, Watch } from 'vue-property-decorator';
import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch, defineProps } from 'vue';
let { proxy }: any = getCurrentInstance();
let tableList: any = reactive([]);
let stringKey = '';

// @Watch('stringValues', { immediate: true, deep: true })

let props = defineProps({
  stringValues: Array as () => String[], //字符串数组
  isChild: Boolean, //是否子行
  childIndex: Number, //子航索引
  inputtype: { type: Number, default: 'text' } //文本类型
}) as any;

watch(
  () => props.stringValues,
  (nVal) => {
    // keyvalue.value = newval;
    if (nVal && Array.isArray(nVal) && nVal.length >= 0) {
      tableList = nVal;
    }
  },
  {
    deep: true,
    immediate: true
  }
);
//回车事件
function  keyupEnter(e:any){
  if(e.$event.code =='Enter'){
    stringListConfirm();
  }
}
function stringValuesChange(nVal: any, oVal: any) {
  if (nVal && typeof nVal === 'object' && nVal.length && nVal.length >= 0) {
    tableList = nVal;
  }
}

function stringListConfirm() {
  tableList.push(stringKey);
  stringKey = '';
  proxy.$emit('confirmList', { childIndex: props.childIndex, arr: tableList });
}

//删除选中
function deleteSelectedItem(rowidx: any) {
  tableList.splice(rowidx, 1);
  proxy.$emit('confirmList', { childIndex: props.childIndex, arr: tableList });
}

function clickEvent3() {
  const $pulldown = proxy.$refs['xDown4' + props.childIndex] as any;
  if ($pulldown) {
    $pulldown.togglePanel();
  }
}
</script>

<style lang="scss" scoped>
.my-dropdown4 {
  padding: 2px;
  min-width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.selectaction {
  width: 55vw;
}

.valueBox {
  margin: 0;
}
.valueBox .valueItem {
  padding: 0.05em;
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.valueBox .valueItem:not(:first-child) {
  margin-top: 0.25em;
}
</style>
